<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>火车票订单-阿里旅行</title>

    <style>
        .clearfix:after {
            /*content: ".";*/
            /*display: block;*/
            /*height: 0;*/
            /*visibility: hidden;*/
            /*clear: both;*/
            content: '.';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            *zoom: 1;
        }

        body {
            background-color: #EDEDED;
        }

        article {
            /*border:1px solid red;*/
            width: 50%;
            margin: 0 auto;
        }

        .traininfo table td {
            padding: 5px 20px;
        }

        .traininfo table td ul {
            list-style: none;
        }

        .traininfo, .seat, .confirm {
            background-color: #fff;
            padding: 10px;
            margin: 10px;
            border: 1px solid #e0e6ed;
        }

        #summary {
            font-family: arial, verdana;
            font-size: 22px;
            font-weight: 400;
            color: #f80;
        }
        .summary {
            padding-left: 50px;
            margin-top: 21px;
            border-top: 1px solid #E3E3E3;
        }
        /*  header **/
        .header {
            width: 100%;
            height: 70px;
            background-color: #fff;
        }

        .header .header-content {
            width: 50%;
            margin: 0 auto;
        }

        .header h1 .header-logo-link {
            text-indent: -99999px;
            float: left;
            height: 53px !important;
            width: 154px !important;
            background: url(http://img.alicdn.com/tps/TB1J4LoOVXXXXaEapXXXXXXXXXX-154-53.svg) no-repeat;
            background-image: url(http://img.alicdn.com/tps/TB1C9LqOVXXXXcuaXXXXXXXXXXX-154-53.png);
            background-position: 0 center;
            background-size: 154px 53px;
        }

        .header h1 s.header-point {
            float: left;
            width: 1px;
            height: 26px;
            overflow: hidden;
            background: #e7eaed;
            margin: 13px 10px 0;
            _display: inline;
        }

        .火车票 {
            color: #C1C1C1;
            font-size: 16px;
            font-family: 微软雅黑;
            text-decoration: none;
        }

        .header h1 .steps {
            margin-top: 30px;
            float: right;
            font-size: 14px;
            font-family: 微软雅黑;
        }

        .header h1 .steps .step {
            font-size: 16px;
            color: #fff;
            background-color: #0092D2;
            padding: 5px 10px;
            border-radius: 15px;
        }

        /**new
         */
        .confirm-info{
            padding: 5px;
            width: 500px;
        }

        .confirm-info .infos {
            position: relative;
            color: #355976;
        }

        .confirm-info .infos .info-index {
            position: absolute;
            float: left;
            top: 0;
            left: 22px;
            background-color: gainsboro;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            color: #fff;
            border-radius: 25px;
        }
        .confirm-info dt {
            color: #355976;
            width: 150px;
            text-align: right;
            line-height: 30px;
            float: left;
        }

        .confirm-info dd {
            color: #355976;
            width: 338px;
            padding-left: 2px;
            float: right;
            text-align: left;
            line-height: 30px;
            margin: 0;
        }
        .confirm-info dd p{
            margin: 0;
        }

        .tip-list {
            color: #355976;
            font-size: 12px;
        }

        .submit {
            background-color: #eff2f5;
            border: 1px solid #e0e6ed;
            border-width: 0 1px 1px;
            text-align: center;
            padding: 10px 20px;
            padding-top: 0;
        }
        .submit p{
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-content">
        <h1>
            <a href="//www.fliggy.com" title="飞猪" class="header-logo-link">飞猪</a>
            <s class="header-point"></s><strong class="header-logo-huochepiao">
            <a href="//train.alitrip.com/stsSearch.htm" title="火车票" class="火车票">火车票</a>
        </strong>
            <span class="steps">
                <span class="step" style="background-color: #ccc">1</span><span>填写订单</span>
                <span class="step">2</span><span>确认订单</span>
                <span class="step" style="background-color: #ccc">3</span><span>支付并完成</span>
            </span>

        </h1>
    </div>
</div>
<article>
    <div class="traininfo">
        <div class="bd">
            <table>
                <tbody>
                <tr>
                    <td class="train-depart">
                        <header class="trinfo-head"><span class="station">南充</span>
                            <span class="text">出发</span>
                        </header>
                        <div class="date-time clearfix">
                            <div class="date-time-cont clearfix"><span class="date">2018年<br>9月8日</span>
                                <span class="time">02:22</span>
                            </div>
                        </div>
                    </td>
                    <td class="train-info">
                        <ul class="train-info-list">
                            <li class="train-meta"><span class="train-type">新空快速</span>
                                <span class="train-num">K352</span>
                            </li>
                            <li class="trinfo-sprite trinfo-split"></li>
                            <li class="time-cost"><i class="trinfo-sprite clock-icon"></i>
                                <span>01时54分</span>
                            </li>
                        </ul>
                    </td>
                    <td class="train-arrive">
                        <header class="trinfo-head"><span class="station">达州</span>
                            <span class="text">到达</span>
                        </header>
                        <div class="date-time clearfix">
                            <div class="date-time-cont clearfix"><span class="date">2018年<br>9月8日</span>
                                <span class="time">04:16</span>
                            </div>
                        </div>
                    </td>
                    <td class="seat-type-wrap confirm-info-td">
                        <header class="trinfo-head">座席类型</header>
                        <div class="seat-type-icon confirm-info-cont  clearfix">
                            <span class="trinfo-sprite J_SeatType seat-seat">硬座</span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="seat">
        <div class="confirm-info"><h4 class="title-passage-msg">购票说明</h4>
            <div class="tuigai-tip">
                <ol class="tip-list">
                    <li>请携带购票证件去全国任意车站窗口取票。取票需提前至少半小时。</li>
                    <li>异地取票收费5元/张。代售点取票收费5元/张。二代身份证可免费在取票机取票。</li>
                    <li>取票需要提前至少半小时。</li>
                    <li>购票成功后，可在线申请退票。</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="confirm">
        <div class="confirm-info"><h4 class="title-passage-msg">乘客信息</h4>
            <div class="passage-info clearfix">
                <dl class="infos clearfix">
                    <dt class="info-index">1</dt>
                    <dt>乘客姓名：</dt>
                    <dd class="dd">张彭洋明</dd>
                    <dt class="dd">证件号码：</dt>
                    <dd class="dd">511324 11111116 1111</dd>
                    <dt class="dd">证件类型：</dt>
                    <dd class="dd">身份证</dd>
                    <dt class="dd">乘客类型：</dt>
                    <dd class="dd">成人</dd>
                    <dt>乘客生日：</dt>
                    <dd class="dd">1111-11-16</dd>
                </dl>
            </div>
            <h4 class="title-contacter-msg">联系人信息</h4>
            <dl class="contacter clearfix">
                <dt>姓名：</dt>
                <dd>张彭洋明</dd>
                <dt>手机号码：</dt>
                <dd>15388128692</dd>
                <dt>电子邮箱：</dt>
                <dd>122162005@qq.com</dd>
            </dl>
            <h4 class="title-insure">保险信息</h4>
            <dl class="clearfix insure">
                <dt>火车意外险：</dt>
                <dd><p>张彭洋明（0份保险共0元）</p></dd>
                <dt>不需要保险发票</dt>
                <dd><span class="noInvoiceTip">感谢您为环保尽了一份力量</span></dd>
            </dl>
        </div>
        <div class="summary" style="padding-left:50px;margin-top: 50px">
            <p>订单总金额：<span id="summary">¥0</span></p>
        </div>
        <div class="submit">
            <p style="line-height: 32px">
                <a onclick="alert('ok')"
                   style="padding:7px 50px;background-color: #ff3c00;;cursor: pointer;text-decoration: none;line-height: 32px">
                    <span style="color: #fff;font-size: 12px;font-weight: 400;">提交订单</span>
                </a>
            </p>
            <p><a href="#fillin" class="J_Step_Back step-back">返回修改订单</a></p>
        </div>
    </div>

</article>

</body>
</html>
